<script lang="ts" setup>
import { useRoute } from 'vue-router'
import { getDetail } from '../../api/detail'
import { reactive } from 'vue'
import { iDetail } from './detailType'
const route = useRoute()

// 用来获取 params 传递的参数
// console.log(route.params.proid);


const state: {
    detail: iDetail
} = reactive({
    detail: {} as iDetail
})

// console.log(route.query);
getDetail(route.query.proid).then(res => {

    res.data.data.banners = res.data.data.banners[0].split(',')
    console.log(res.data.data);

    state.detail = res.data.data

})


</script>
<template>
    <div class="box">
        <header class="header">
            <span @click="$router.back()" class='left'>
                &lt;
                返回
            </span>
            详情
        </header>
        <div class="content">

            <div class="my-detail-swipe">
                <!-- 轮播图代码 -->
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#f66">
                    <van-swipe-item v-for="item in state.detail.banners" :key="item">
                        <van-image class="swipe-image" :src="item" />
                    </van-swipe-item>
                </van-swipe>
            </div>

            <!-- 用来显示其余数据用的 -->
            <div class="cell">
                <h2> {{ state.detail.proname }} </h2>
                <p>
                    <span style="color: red;"> 活动价格： {{ state.detail.originprice * state.detail.discount * 0.1 }}</span>
                    <del> 原价: ￥{{ state.detail.originprice }} </del>
                </p>
                <p> {{ state.detail.brand }} </p>
                <p> {{ state.detail.category }} </p>
                <p class="desc"> {{ state.detail.desc }} </p>
            </div>


        </div>
    </div>
</template>
<style lang="scss" scoped>
.header {
    .left {
        float: left;
        padding-left: 10px;
    }
}

.my-swipe {
    height: 420px;
    line-height: 420px;

    .swipe-image {
        width: 100%;
        height: 100%;
    }
}

.cell {
    height: 3500px;
    padding: 12px;
}

.desc {
    line-height: 30px;
    font-size: 14px;
}
</style>